<template>
  <view class="arrange">
    <view class="arrange-content">
      <view class="arrange-tab">
        <view
          class="arrange-tab-item"
          v-for="(i, k) in tabList"
          :key="k"
          :class="{ active: queryParams.status == i.value }"
          @click="handleTab(i.value)"
        >
          {{ i.label }}
        </view>
      </view>
      <view
        class="arrange-item"
        v-for="(item, index) in dataList"
        :key="index"
        :style="{
          '--statusColor': getColor(item.status),
        }"
      >
        <view class="arrange-item-box">
          <view class="arrange-item-left">
            <view class="date"
              >{{ item.planBeginTime.split(" ")[0] }}-{{ item.planEndTime.split(" ")[0] }}
            </view>
            <view class="title">{{ item.projectName }}</view>
          </view>
          <view class="arrange-item-right">
            <uv-icon
              bold
              :name="getStatusIcon(item.status)"
              :label="getStatusLabel(item.status)"
              label-color="#757575"
            />
          </view>
        </view>
        <view
          v-if="item.status == 1"
          @click="handleDispatch(item)"
          class="arrange-item-bottom"
        >
          开始排班
        </view>
      </view>
      <uv-empty
        v-if="dataList.length == 0"
        margin-top="20vh"
        :icon="empty"
        text="今天还没有安排日程哦"
      />
      <uv-load-more v-else :status="status" line />
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { planList } from "@/request/home.js";
import empty from "@/static/empty.png";
import iconClock from "@/static/home/icon_clock.png";
import iconAppointment from "@/static/home/icon_appointment.png";
import iconSuccess from "@/static/home/icon_success.png";
import iconProgress from "@/static/home/icon_progress.png";
import iconWarn from "@/static/home/icon_warn.png";

const props = defineProps({
  // 是否下拉刷新
  refresh: {
    type: Boolean,
    default: false,
  },
  // 上拉加载
  onMore: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["onRefresh", "onReach"]);

const queryParams = ref({
  status: "", // 默认选中类型
  pageNum: 1,
  pageSize: 10,
});
const total = ref(0); // 总条数
const dataList = ref([]); // 日程列表
const tabList = ref([
  { label: "未安排", value: 1 },
  { label: "进行中", value: 3 },
  { label: "已超时", value: 5 },
  { label: "已完成", value: 4 },
  { label: "全部", value: "" },
]); // tab列表
const status = ref("loadmore"); // 加载状态

onMounted(() => {
  getList();
});

watch(
  props,
  (v) => {
    if (v.refresh) {
      setTimeout(() => {
        queryParams.value.pageNum = 1;
        getList();
      }, 0);
    }
    if (v.onMore) {
      if (total.value > dataList.value.length) {
        queryParams.value.pageNum += 1;
        getList();
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

// 获取数据列表
const getList = () => {
  status.value = "loading";
  planList(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      emit("onRefresh", false);
      uni.stopPullDownRefresh();
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
      if (props.onMore) emit("onReach", false);
    });
};
// 开始排班
const handleDispatch = (item) => {
  uni.navigateTo({
    url: `/pages/Home/appointClass?id=${item.id}&timeEnd=${
      item.planEndTime.split(" ")[0]
    }&timeStart=${item.planBeginTime.split(" ")[0]}`,
  });
};

// tab切换
const handleTab = (val) => {
  queryParams.value.pageNum = 1;
  queryParams.value.status = val;
  getList();
};

// 状态图标
const getStatusIcon = (status) => {
  switch (status) {
    case 1:
      return iconClock;
    case 2:
      return iconAppointment;
    case 3:
      return iconProgress;
    case 4:
    case 6:
      return iconSuccess;
    case 5:
      return iconWarn;
    default:
      return "";
  }
};

// 状态颜色
const getColor = (status) => {
  switch (status) {
    case 1:
      return "#f2ce90";
    case 2:
      return "#85C889";
    case 3:
      return "#87BCF5";
    case 4:
    case 6:
      return "#85C889";
    case 5:
      return "#F2AFA5";
    default:
      return "";
  }
};

// 状态中文显示
const getStatusLabel = (status) => {
  switch (status) {
    case 1:
      return "未排班";
    case 2:
      return "已预约";
    case 3:
      return "进行中";
    case 4:
    case 6:
      return "已完成";
    case 5:
      return "已超时";
    default:
      return "";
  }
};
</script>
<style lang="scss" scoped>
.arrange {
  padding: 30rpx;
  box-sizing: border-box;

  .arrange-content {
    background: #ffffff;
    box-shadow: 0 0 20rpx 2rpx rgba(117, 117, 117, 0.16);
    border-radius: 20rpx;
    padding-bottom: 20rpx;
    min-height: 75vh;

    .arrange-tab {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 96rpx;
      border-bottom: 2rpx solid #e6f1e9;

      &-item {
        flex: 1;
        text-align: center;
        font-size: 28rpx;
        color: #757575;
        border-right: 2rpx solid #f2f2f2;

        &:last-child {
          border-right: none;
        }
      }

      .active {
        color: #4ea770;
      }
    }

    .arrange-item {
      --statusColor: #f2ce90;
      width: auto;
      background: #f6f6f6;
      border-radius: 20rpx;
      margin: 20rpx;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;

      &:last-child {
        margin-bottom: 0;
      }

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 20rpx;
        height: 100%;
        background-color: var(--statusColor);
      }

      &-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 120rpx;

        .arrange-item-left {
          width: calc(100% - 240rpx);
          height: 100%;
          padding-left: 60rpx;
          border-right: 2rpx solid #e7e7e7;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .date {
            font-size: 28rpx;
            color: #757575;
          }

          .title {
            font-size: 28rpx;
            color: #212121;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .arrange-item-right {
          width: 180rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      &-bottom {
        height: 80rpx;
        display: flex;
        font-size: 28rpx;
        color: #212121;
        align-items: center;
        justify-content: center;
        border-top: 2rpx solid #d9d9d9;
      }
    }
  }
}
</style>
